<template>
	<el-container>
	  <el-header>
		  <div>
			  <img src="../assets/logo.png" height="30px;"></img>
			  权限管理系统
		  </div>
		  <el-dropdown @command="handleCmd">
			<span class="el-dropdown-link" v-if="this.$store.state.userInfo.headImg">
			  <img :src="this.$store.state.userInfo.headImg" height="30px;" />
			</span>
			<span class="el-dropdown-link" v-if="!this.$store.state.userInfo.headImg">
				<span>{{this.$store.state.userInfo.name}}</span>
			</span>
			<el-dropdown-menu slot="dropdown">
			  <el-dropdown-item command="modifyUser">个人信息</el-dropdown-item>
			 <!-- <el-dropdown-item command="modifyUserPass">修改密码</el-dropdown-item> -->
			  <el-dropdown-item command="exit" divided>退出登录</el-dropdown-item>
			</el-dropdown-menu>
		  </el-dropdown>
	  </el-header>
	  <el-container>
	    <el-aside :style="'margin-top: 10px;width: '+(isCollapse?'70':'200')+'px;'">
			<div @click="isCollapse=true" v-if="!isCollapse">
				<i class="el-icon-s-fold">收起</i>
			</div>
			<div @click="isCollapse=false" v-if="isCollapse">
				<i class="el-icon-s-unfold">展开</i>
			</div>
			<el-menu router default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
			  <el-submenu :index="index+'1'" v-for="(menu,index) in menuData">
			    <template slot="title">
			      <i :class="menu.iconCls"></i>
			      <span slot="title">{{menu.name}}</span>
			    </template>
			    <el-menu-item-group>
			      <el-menu-item :index="subMenu.path" v-for="subMenu in menu.subMenu">
					<i :class="subMenu.iconCls"></i>
					{{subMenu.name}}
				  </el-menu-item>
			    </el-menu-item-group>
			  </el-submenu>
			  
			</el-menu>
		</el-aside>
	    <el-main>
			<router-view></router-view>
		</el-main>
	  </el-container>
	  
	  <!-- 修改个人资料 -->
	  <!-- 对话框添加班级信息 -->
	  <el-dialog
	    title="用户/添加/编辑"
	    :visible.sync="dialogVisible"
	    width="40%">
		
	    <el-form ref="userForm" :model="userForm" label-width="80px">
	      <el-form-item label="用户姓名">
	        <el-input v-model="userForm.name"></el-input>
	      </el-form-item>
	  
	  	<el-form-item label="用户头像">
	  	  <el-upload
	  	    class="avatar-uploader"
	  	    :action="$baseUrl+'file/upload/'"
	  	    :show-file-list="false"
	  	    :on-success="handleAvatarSuccess">
	  	    <img v-if="userForm.headImg" :src="userForm.headImg" class="avatar">
	  	    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
	  	  </el-upload>
	  	</el-form-item>

	    </el-form>
	    <span slot="footer" class="dialog-footer">
	      <el-button @click="dialogVisible = false">取 消</el-button>
	      <el-button type="primary" @click="saveUserInfo">确 定</el-button>
	    </span>
	  </el-dialog>
	  
	  
	</el-container>
</template>

<script>
	export default {
		data(){
			return {
				isCollapse: true,
				menuData:[],
				dialogVisible:false,
				userForm:{}
			}
		},
		methods:{
			handleCmd(cmd){
				console.log("command:"+cmd);
				if(cmd=='exit'){
					localStorage.removeItem('token');
					this.$router.push('/');
				}else if(cmd='modifyUser'){
					this.dialogVisible = true;
					this.axios.get(this.$baseUrl+'user/getLoginUserInfo').then(res=>{
						this.userForm = res.data.data;
					})
				}
			},
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(){
				
			},
			handleAvatarSuccess(res){
				this.userForm.headImg = res.data.fileUrl;
			},
			saveUserInfo(){
				this.axios.post(this.$baseUrl+'user/save',this.userForm).then(res=>{
					if(res.data.result){
						this.$store.commit("setUserInfo",this.userForm);
						this.dialogVisible=false;
						this.$message(
							{
								type: 'success',
								message: '修改成功'
							}
						);
					}
				})
			}
			
		},
		created(){
			this.$router.push("/helloWorld")
			this.axios.get(this.$baseUrl+'menu/getTreeMenus').then(res=>{
				this.menuData = res.data.data;
			})
		}
	}
</script>

<style scoped>
	.el-header {
		background-color: #252733;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #fff;
		font-size: 24px;
	}
	.el-header div {
		display: flex;
		align-items: center;
	}
		
	.el-aside div {
		text-align: center;
	}
	.el-dropdown-link {
		color: #fff;
	}
	
	.avatar-uploader .el-upload {
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	  }
	  .avatar-uploader .el-upload:hover {
	    border-color: #409EFF;
	  }
	  .avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 178px;
	    height: 178px;
	    line-height: 178px;
	    text-align: center;
	  }
	  .avatar {
	    width: 178px;
	    height: 178px;
	    display: block;
	  }
</style>
